import {
    AI,
    AGI,
    LLM,
    MINI_PROGRAM,
    BROWSER_EXTENSION,
    H5,
    PLUGIN,
    ALGORITHMS,
    ANGULAR,
    ANIMATION,
    BROWSER_APIS,
    BUILD_TOOLS,
    CANVAS,
    CI_CD,
    CODE_QUALITY,
    CROSS_PLATFORM,
    CSS,
    DATA_STRUCTURES,
    DESIGN_PATTERNS,
    DEVOPS,
    DOCKER,
    EXPRESS,
    FRAMEWORKS,
    GIT,
    GRAPHQL,
    HTML,
    HTTP,
    JAVASCRIPT,
    LESS,
    MOBILE_DEVELOPMENT,
    NEXTJS,
    NODEJS,
    NUXTJS,
    PERFORMANCE,
    PROGRESSIVE_WEB_APPS,
    REACT,
    REDUX,
    RESPONSIVE_DESIGN,
    REST_API,
    SASS,
    SECURITY,
    SEO,
    STATE_MANAGEMENT,
    SVG,
    TESTING,
    TYPESCRIPT,
    UI_UX,
    VERSION_CONTROL,
    VITE,
    VUE,
    VUEX,
    WEBGL,
    WEBPACK,
    WEBSOCKETS,
    WEB_COMPONENTS,
} from '@/constants';

export default [
    {
        "id": "7309f0d1-ec70-46c4-b33b-396ba70c392d",
        "url": "/other/shorts/nativescript_sdk_installed_but_still_error.webp",
        "slug": "nativescript_sdk_installed_but_still_error",
        "createdAt": 1761473066635,
        "title": "NativeScript SDK 明明装了却一直报错",
        "description": "NativeScript CLI反复提示SDK未安装或版本不匹配时，90%问题出在Android SDK路径、build-tools版本与gradle插件三处配置。文章逐条验证sdkmanager、环境变量、nativescript.config.js、Gradle本地缓存，给出一键修复脚本与CI镜像方案，彻底消除“明明装了却报错”的假象。",
        "tags": [JAVASCRIPT, CROSS_PLATFORM, MOBILE_DEVELOPMENT],
        "content": "/shorts/NativeScript SDK 明明装了却一直报错.md"
    },
    {
        "id": "b562111a-f86e-43d0-9905-c0df817a84d0",
        "url": "/other/shorts/knip_cleaned_nx_project_removed_120_deps.webp",
        "slug": "knip_cleaned_nx_project_removed_120_deps",
        "createdAt": 1761473066635,
        "title": "我用Knip清理了Nx项目，一口气删了120个没用的依赖",
        "description": "Knip扫描Nx Monorepo，自动识别未引用依赖、冗余文件与空入口，一键移除120个包并同步更新tsconfig、项目引用与IDE索引；对比手动清理流程，展示扫描规则、白名单配置与CI集成技巧，显著缩减安装、构建耗时并降低漏洞面，为大型工程提供可复制的依赖瘦身方案。",
        "tags": [JAVASCRIPT, NODEJS, PERFORMANCE, CODE_QUALITY, BUILD_TOOLS],
        "content": "/shorts/我用Knip清理了Nx项目，一口气删了120个没用的依赖.md"
    },
    {
        "id": "f1cf41dd-d951-4cd2-a26f-ff8011b29d3c",
        "url": "/other/shorts/stream_write_large_files_browser.webp",
        "slug": "stream_write_large_files_browser",
        "createdAt": 1761473066635,
        "title": "浏览器里处理大文件，这招流式写入真管用",
        "description": "基于WritableStream、TransformStream与File System Access API，在浏览器端实现GB级文件分块流式写入，边下载边落盘，内存占用稳定在百兆内；提供可中断续传、进度反馈与错误重试策略，适用于大体积日志、视频、数据库备份等前端接收场景，一套代码即可替代传统Blob拼接，显著降低崩溃风险并提升交付速度。",
        "tags": [JAVASCRIPT, BROWSER_APIS, PERFORMANCE],
        "content": "/shorts/浏览器里处理大文件，这招流式写入真管用.md"
    },
    {
        "id": "7d1e71e7-686a-4f59-a30d-6a4acdff7bb3",
        "url": "/other/shorts/claude_code_sub_agents_key_points.webp",
        "slug": "claude_code_sub_agents_key_points",
        "createdAt": 1757734927694,
        "title": "Claude Code Sub-agents 核心要点总结",
        "description": "Claude Code 的 Sub-agents 机制拆解：任务拆分、上下文隔离、并行调度与结果聚合原理，结合自动化测试、批量重构、多仓库同步等实战脚本，展示如何仅用 30 行代码启动子代理池，降低大模型交互延迟 40%，并给出错误回溯、令牌回收、沙箱限权等生产级模板，可直接嵌入 CI/CD 与脚手架，实现前端项目的无人值守代码生成与合规检查。",
        "tags": [AI, LLM],
        "content": "/shorts/Claude Code Sub-agents 核心要点总结.md"
    },
    {
        "id": "d0dd8839-ac87-49d9-919e-5bf60aecc964",
        "url": "/other/shorts/geo_concise_guide.webp",
        "slug": "geo_concise_guide",
        "createdAt": 1757741060082,
        "title": "GEO简明指南",
        "description": "GEO（Generative Engine Optimization）入门到实战：解析生成式引擎如何抓取、理解并引用前端内容，给出结构化数据、语义标记、性能与可访问性优化清单，结合Next.js与SSR示例演示提升可见度的技术细节，让站点在AI搜索时代获得稳定曝光与流量。",
        "tags": [BROWSER_APIS],
        "content": "/shorts/GEO简明指南.md"
    },
    {
        "id": "f7c0b1cf-3391-4e75-9beb-57b4ec49c4a7",
        "url": "/other/shorts/mastering_npx_command_guide.webp",
        "slug": "mastering_npx_command_guide",
        "createdAt": 1759821268762,
        "title": "精通 npx 命令指南",
        "description": "npx 命令深度解析，覆盖一次性执行、本地包调用、注册表缓存、执行策略与 shell 自动回退机制，演示在 CI、脚手架、多版本共存、零全局安装等场景下的最佳实践，提供性能对比、安全风险排查与自定义配置技巧，帮助开发者用一条命令提升工作流效率并避免依赖污染。",
        "tags": [JAVASCRIPT, NODEJS],
        "content": "/shorts/精通 npx 命令指南.md"
    },
    {
        "id": "27b0fba7-622b-41fc-b09d-432993f98449",
        "url": "/other/shorts/zoxide_fzf_gh_quick_commands.jpg",
        "slug": "zoxide_fzf_gh_quick_commands",
        "createdAt": 1756305119231,
        "title": "zoxide 与 fzf 、gh 快捷命令",
        "description": "zoxide提供智能目录跳转功能，结合fzf的模糊搜索和GitHub CLI（gh）的命令行操作，实现高效的项目导航与仓库管理。通过集成这三个工具，开发者可以快速切换目录、搜索文件并执行GitHub操作，显著提升终端工作效率。文章包含配置指南和实际用例，帮助读者构建流畅的命令行工作流。",
        "tags": [GIT, BUILD_TOOLS, VERSION_CONTROL, CODE_QUALITY, DEVOPS],
        "content": "/shorts/zoxide与fzf与gh快捷命令.md"
    },
    {
        "id": "964cd2b0-4fee-4d9e-a9fd-d357e5f3849d",
        "url": "/other/shorts/how_to_fix_uv_package_installation_failure.webp",
        "slug": "how_to_fix_uv_package_installation_failure",
        "createdAt": 1749006350309,
        "title": "如何解决uv安装包失败问题？",
        "description": "uv安装包失败的常见原因包括网络环境限制、依赖冲突、权限不足或系统兼容性问题。本质在于npm/yarn/pnpm等包管理器在解析依赖树或下载二进制文件时的链路异常。核心解决思路需分三步：检查报错日志定位具体阶段（下载/编译/链接），针对性替换镜像源或配置代理；清理缓存并重装node_modules；验证node版本与系统架构匹配性。若涉及原生模块编译失败，需安装Python或C++编译工具链。最终应通过锁定版本号或使用--force参数绕过校验，但需权衡稳定性风险。",
        "tags": [NODEJS, BUILD_TOOLS, VERSION_CONTROL],
        "content": "/shorts/如何解决uv安装包失败问题？.md"
    },
    {
        "id": "5f357eec-28c6-40af-963e-aa54beae801c",
        "url": "/other/shorts/browser_plugin_publish_type_selection.webp",
        "slug": "browser_plugin_publish_type_selection",
        "createdAt": 1749478169778,
        "title": "浏览器插件发布类型选择",
        "description": "浏览器插件发布类型选择涉及不同分发渠道的优缺点对比，如Chrome Web Store、Firefox Add-ons、Edge扩展商店等平台审核机制与政策差异。需权衡公开商店的流量优势与自主托管的灵活性，分析企业私有分发场景下的签名与部署方案。本质是平衡开发成本、用户触达效率与合规风险，核心决策因素包括目标用户群体、功能敏感度及长期维护策略。插件类型（内容脚本/后台服务）与盈利模式（付费/广告）直接影响发布路径选择。",
        "tags": [BROWSER_EXTENSION, PLUGIN],
        "content": "/shorts/浏览器插件发布类型选择.md"
    },
    {
        "id": "d1fa6f7b-5ca3-4613-9e31-c759837ca448",
        "url": "/other/shorts/special_mask_effect_implementation.webp",
        "slug": "special_mask_effect_implementation",
        "createdAt": 1748443053392,
        "title": "特殊遮罩效果实现",
        "description": "特殊遮罩效果实现涉及利用CSS和JavaScript创建视觉层次丰富的界面元素。通过混合模式、遮罩层、透明度控制等技术，实现图片、文字或组件的动态遮挡与显示效果。本质是对层叠上下文和视觉渲染流程的精确控制，结合裁剪路径、SVG遮罩或CSS mask属性完成非矩形区域的视觉切割。关键在于平衡性能与表现力，运用硬件加速优化渲染效率，同时确保响应式适配不同设备。典型应用包括高亮引导、焦点聚焦、图像艺术化处理等交互场景，需注意浏览器兼容性与可访问性设计。",
        "tags": [CSS, ANIMATION, UI_UX],
        "content": "/shorts/特殊遮罩效果实现.md"
    },
    {
        "id": "ca29109f-015b-4bbd-a407-6c36dee01493",
        "url": "/other/shorts/configure_ci_for_miniprogram_auto_build_upload.webp",
        "slug": "personal_wechat_setup_steps",
        "createdAt": 1748310988856,
        "title": "个人公众号配置步骤",
        "description": "个人公众号配置步骤涉及注册流程、基础设置、菜单栏设计、自动回复规则配置、素材管理及权限分配。本质是通过微信公众平台后台完成账号初始化与功能搭建，核心包括服务号/订阅号类型选择、开发者ID获取、服务器URL绑定等开发前置操作，以及图文排版、粉丝互动、数据统计等日常运营功能配置。关键点在于理解微信生态规则，将技术实现与内容运营结合，最终形成可维护的标准化操作流程。",
        "tags": [MINI_PROGRAM],
        "content": "/shorts/个人公众号配置步骤.md"
    },
    {
        "id": "f05b4cb7-dfea-45a8-807d-605f8f999f54",
        "url": "/other/shorts/enterprise_wechat_app_dev_pitfalls.webp",
        "slug": "enterprise_wechat_app_dev_pitfalls",
        "createdAt": 1748177188875,
        "title": "企业微信代开发应用流程踩坑",
        "description": "企业微信代开发应用流程中常见问题与解决方案，包括配置授权、接口调用限制、回调地址设置、身份验证机制等关键环节的实践细节。重点分析开发过程中容易忽略的权限配置错误、域名白名单限制、消息加解密兼容性、第三方应用审核驳回原因等典型坑点。本质在于企业微信封闭生态与开放API之间的对接复杂度,需平衡平台安全规范与业务需求，涉及OAuth2.0流程优化、跨域策略处理、临时授权码时效性等底层技术逻辑的实战经验总结。",
        "tags": [JAVASCRIPT, REST_API, NODEJS, WEBPACK, SECURITY],
        "content": "/shorts/企业微信代开发应用流程踩坑.md"
    },
    {
        "id": "d1721c4a-4a7d-49d9-a382-e8bfa8b7858a",
        "url": "/other/shorts/configure_ci_for_miniprogram_auto_build_upload.webp",
        "slug": "configure_ci_for_miniprogram_auto_build_upload",
        "createdAt": 1748177012493,
        "title": "如何在CI中配置小程序自动打包并上传代码",
        "description": "小程序自动化构建与发布的CI流程实现方法，包括配置持续集成环境、编写打包脚本、处理依赖安装、设置版本号自动递增、调用开发者工具命令行实现代码上传、处理不同环境参数配置、管理上传密钥安全存储、触发企业微信通知机制等核心环节。本质是通过标准化流程替代人工操作，解决重复性劳动问题，提升发布效率并降低人为错误风险，关键在于平衡自动化与安全控制的关系。",
        "tags": [CI_CD, BUILD_TOOLS],
        "content": "/shorts/如何在CI中配置小程序自动打包并上传代码.md"
    },
    {
        "id": "de1fc441-2cb2-4c29-99c1-b61082ea0cf4",
        "url": "/other/shorts/mini_program_qrcode_scan_test_summary.webp",
        "slug": "mini_program_qrcode_scan_test_summary",
        "createdAt": 1748177423028,
        "title": "小程序二维码识别能力测试总结",
        "description": "小程序二维码识别技术实现的测试方法与关键问题分析，包括不同机型适配性、扫描精度对比、性能优化策略及常见兼容性解决方案。本质是对前端图像处理能力的边界探索，涉及底层API调用效率、容错机制设计及用户体验平衡点。重点剖析微信原生组件与第三方库的识别率差异，弱光环境、畸变二维码等极端场景的应对方案，以及如何通过缓存策略降低CPU占用率。最终落脚于技术选型标准与业务场景的匹配逻辑。",
        "tags": [TESTING, MOBILE_DEVELOPMENT],
        "content": "/shorts/小程序二维码识别能力测试总结.md"
    },
    {
        "id": "5bded4b1-fde0-4f23-af13-0dde6b7c6479",
        "url": "/other/shorts/cursor_mdc_rules_summary.webp",
        "slug": "cursor_mdc_rules_summary",
        "createdAt": 1746437446723,
        "title": "Cursor mdc规则学习总结",
        "description": "MDC（Material Design Components）中Cursor样式的规范与实践应用，包括交互状态下指针形态的设计原则、状态反馈逻辑及无障碍适配要点。核心涉及hover/focus/active等场景的视觉一致性处理，如何通过CSS变量和JavaScript动态控制光标类型以符合Material Design 3的交互标准，并对比默认浏览器行为与MDC定制方案的差异。本质是解析组件库对用户操作意图的视觉传达机制，强调光标变化与功能预期的语义关联性，例如拖拽操作中的grab光标或禁用状态的not-allowed实现细节。",
        "tags": [JAVASCRIPT, CSS, UI_UX, DESIGN_PATTERNS],
        "content": "/shorts/Cursor mdc规则学习总结.md"
    },
    {
        "id": "80fb5113-741d-4919-9387-b558bf7415d2",
        "url": "/other/shorts/independent_devs_time_management_priorities.webp",
        "slug": "independent_devs_time_management_priorities",
        "createdAt": 1746410783650,
        "title": "独立开发者，时间到底该花在哪？",
        "description": "独立开发者面临时间分配的核心矛盾：产品开发、技术学习、运营推广、用户反馈处理之间的优先级权衡。本质是资源有限性下的ROI决策问题，需平衡短期产出与长期价值。技术债偿还与新技术探索的博弈，产品迭代与市场验证的节奏把控，个人品牌建设与实际收入转化的比例分配。关键在于建立量化评估体系，区分\"伪忙碌\"与\"真价值\"，通过数据驱动决策而非直觉。时间投入应聚焦能产生复利效应的领域，如构建可复用组件库、自动化流程工具、内容资产沉淀等。最终指向最小化时间成本获取最大成长收益的方法论。",
        "tags": [PERFORMANCE, DESIGN_PATTERNS, BUILD_TOOLS],
        "content": "/shorts/独立开发者，时间到底该花在哪？.md"
    },
    {
        "id": "21fdfaee-0d02-4ec0-9de7-67131c122aff",
        "url": "/other/shorts/prompt_engineering.webp",
        "slug": "prompt_engineering",
        "createdAt": 1746176388741,
        "title": "Prompt Engineering 阅读总结",
        "description": "PromptEngineering是优化AI模型输入指令的技术，通过结构化、清晰的提示词引导模型输出更精准的结果。其核心在于设计高效的问题表述，结合上下文、示例和约束条件，提升大语言模型的响应质量。前端开发中可用于生成代码、优化UI文案或自动化测试脚本，本质是人与AI的交互设计，需平衡明确性与灵活性。关键要素包括指令清晰度、示例相关性、格式控制及迭代调优，最终实现低成本高效率的AI协作。",
        "tags": [JAVASCRIPT, TYPESCRIPT, REACT, VUE, WEBPACK],
        "content": "/shorts/PromptEngineering.md"
    },
    {
        "id": "4288c792-5d85-4ad1-bd0b-b76a48571d19",
        "url": "/other/shorts/how_to_fix_nextjs_src_access_issue.webp",
        "slug": "how_to_fix_nextjs_src_access_issue",
        "createdAt": 1745421051841,
        "title": "如何解决Next无法访问src目录文件问题？",
        "description": "Next.js项目中无法访问src目录文件的常见原因包括配置错误、路径引用问题或构建工具限制。本质在于Next.js默认文件结构约定与自定义配置冲突，需通过修改next.config.js或调整引用方式解决。典型场景涉及别名配置、静态资源处理或服务端渲染路径解析。解决方案可能包含设置正确的Webpack别名、使用public目录替代或启用实验性特性。",
        "tags": [NEXTJS, JAVASCRIPT, REACT, BUILD_TOOLS],
        "content": "/shorts/如何解决Next无法访问src目录文件问题？.md"
    }, {
        "id": "06a279a3-ba11-43dd-aa57-6dbb32016b4b",
        "url": "/other/shorts/nodemailer_gmail_email_config.webp",
        "slug": "nodemailer_gmail_email_config",
        "createdAt": 1744901273197,
        "title": "使用Nodemailer发送邮件Gmail配置",
        "description": "Nodemailer在Node.js环境中通过Gmail发送邮件的具体配置步骤，包括如何设置SMTP服务器、生成应用专用密码或启用OAuth2认证。涉及Gmail安全设置调整，如允许低安全性应用访问或开启两步验证。需配置Nodemailer的传输对象，包含服务类型、主机地址、端口号、安全协议及用户凭证等参数。常见问题解决方案如处理认证错误、端口被屏蔽或发送限制。代码示例展示基础邮件发送实现，附件添加及HTML内容支持。注意事项强调避免将敏感信息硬编码，推荐使用环境变量存储凭证。性能优化建议涉及连接池管理和错误重试机制。",
        "tags": [NODEJS, JAVASCRIPT],
        "content": "/shorts/使用Nodemailer发送邮件Gmail配置.md"
    },
    {
        id: '133574f5-2abe-449b-a093-0dc509ee2f91',
        url: '/other/shorts/vercel_app_cloudflare_domain_guide.webp',
        slug: 'vercel_app_cloudflare_domain_guide',
        createdAt: 1733629019837,
        title: 'Vercel应用绑定到CloudFlare域名指南',
        description:
            '如何将Vercel应用绑定到CloudFlare域名的详细步骤，包括在CloudFlare中配置DNS记录、设置CNAME或A记录指向Vercel，以及在Vercel后台配置自定义域名的过程。重点讲解了域名解析的配置细节，确保域名能够正确指向Vercel应用，同时避免常见的配置错误。此外，还可能涉及SSL证书的自动配置、域名验证的注意事项，以及如何处理域名绑定后可能出现的访问问题。通过这一指南，用户可以顺利完成Vercel与CloudFlare的域名绑定，确保应用的稳定性和安全性。',
        tags: [NODEJS, EXPRESS, NEXTJS],
        content: '/shorts/Vercel应用绑定到CloudFlare域名指南.md',
    },
    {
        id: 'b795d11d-f019-4daf-9a9f-03766ee61acb',
        url: '/other/shorts/cursor.webp',
        slug: 'cursor_free_guide',
        createdAt: 1729757310050,
        title: '反复白嫖 Cursor 详细指南',
        description:
            '该博客详细介绍了如何有效地使用Cursor工具进行前端开发，包括如何利用Cursor的各种功能来提高开发效率，避免重复劳动。内容涵盖了Cursor的基本操作、高级技巧、常见问题及解决方案，以及如何通过Cursor实现代码的快速生成和优化。博客还探讨了如何在团队协作中最大化利用Cursor，以及如何通过Cursor的插件和扩展功能进一步提升开发体验。此外，博客还提供了一些实用的案例和示例，帮助读者更好地理解和应用Cursor。',
        tags: [DEVOPS],
        content: '/shorts/反复白嫖 Cursor 详细指南.md',
    },
    {
        id: 'c9febbd3-2529-4723-b121-5554748749c5',
        url: '/other/shorts/chrome_usage_tips_summary.webp',
        slug: 'chrome_usage_tips_summary',
        createdAt: 1729499272008,
        title: 'Chrome使用技巧总结',
        description:
            '这些技巧可能包括快捷键的使用、扩展程序的推荐、隐私设置的优化、书签管理、开发者工具的应用等。通过总结这些技巧，博客旨在提升用户的浏览体验，使其能够更好地利用Chrome的功能来提高工作效率和解决日常问题。',
        tags: [BROWSER_APIS, PERFORMANCE, SEO, WEB_COMPONENTS, DESIGN_PATTERNS],
        content: '/shorts/Chrome使用技巧总结.md',
    },
    {
        id: 'fa2ef980-246a-4dac-9c2e-e9167ba08b34',
        url: '/other/shorts/github_usage_tips_summary.webp',
        slug: 'github_usage_tips_summary',
        createdAt: 1729499272068,
        title: 'Github使用技巧总结',
        description:
            '这篇博客主要探讨了如何高效地使用Github的功能，包括但不限于创建和管理仓库、分支策略、代码审查、问题跟踪、持续集成与部署等。通过总结这些技巧，作者旨在帮助开发者提升在Github上的工作效率，优化团队协作流程，并确保代码质量和项目管理的有效性。',
        tags: [GIT, VERSION_CONTROL, CODE_QUALITY, DEVOPS, CI_CD],
        content: '/shorts/Github使用技巧总结.md',
    },
    {
        id: '32bd308f-12d1-4efc-8f58-aa326e9275cc',
        url: '/other/shorts/git_usage_tips_summary.webp',
        slug: 'git_usage_tips_summary',
        createdAt: 1729499272078,
        title: 'Git使用技巧总结',
        description:
            '这些技巧可能包括如何高效地管理分支、解决合并冲突、使用Git命令进行代码回滚、以及如何利用Git的强大功能来提高团队协作效率。通过总结这些技巧，博客旨在帮助前端开发者更好地掌握Git工具，提升代码管理和版本控制的能力，从而在项目开发中更加得心应手。',
        tags: [GIT, VERSION_CONTROL],
        content: '/shorts/Git使用技巧总结.md',
    },
    {
        id: 'c011b709-9064-4829-a40e-748dd0f594c2',
        url: '/other/shorts/monorepo_pnpm_integration.webp',
        slug: 'monorepo_pnpm_integration',
        createdAt: 1729499995761,
        title: 'Monorepo和Pnpm共同使用',
        description:
            'Monorepo架构允许将多个相关项目放在同一个代码仓库中，而Pnpm则通过其独特的依赖管理机制，解决了传统包管理器在Monorepo环境中可能遇到的依赖冗余和性能问题。博客内容可能涵盖了如何配置和使用Pnpm在Monorepo中进行依赖管理，以及这种组合如何帮助开发者更高效地组织和维护大型前端项目。',
        tags: [BUILD_TOOLS, STATE_MANAGEMENT, CODE_QUALITY, VERSION_CONTROL, DEVOPS],
        content: '/shorts/Monorepo和Pnpm共同使用.md',
    },
    {
        id: '86a71193-f1d4-4ada-88b0-1c01583013d2',
        url: '/other/shorts/node_npm_tips_summary.webp',
        slug: 'node_npm_tips_summary',
        createdAt: 1729499272128,
        title: 'Node或NPM使用技巧总结',
        description:
            '这些技巧可能包括如何高效地管理依赖包、优化项目结构、提升开发效率、解决常见问题以及利用NPM生态系统中的工具和插件。通过总结这些技巧，博客旨在帮助前端开发者更好地利用Node和NPM来构建和维护现代Web应用，从而提升开发效率和代码质量。',
        tags: [NODEJS, BUILD_TOOLS, VERSION_CONTROL, CODE_QUALITY, DEVOPS],
        content: '/shorts/Node或NPM使用技巧总结.md',
    },
    {
        id: 'e82d956b-a1a6-4317-ba6e-b52fbc2355a4',
        url: '/other/shorts/npm_package_publishing_tips.webp',
        slug: 'npm_package_publishing_tips',
        createdAt: 1729499766895,
        title: 'NPM发包那些事',
        description:
            '它涵盖了从初始化项目、编写代码、配置package.json、发布到NPM仓库，到版本管理、依赖处理等各个环节的详细步骤和技巧。通过深入剖析NPM发包的本质，博客旨在帮助前端开发者更好地理解和掌握NPM发包的全过程，提升发包效率和质量。',
        tags: [NODEJS, BUILD_TOOLS, VERSION_CONTROL, CODE_QUALITY, DEVOPS],
        content: '/shorts/NPM发包那些事.md',
    },
    {
        id: 'a3b78bff-56f9-44ba-905a-b2ae2ad8787f',
        url: '/other/shorts/understanding_package_json.webp',
        slug: 'understanding_package_json',
        createdAt: 1729499781306,
        title: 'package.json文件了解',
        description:
            '文章详细介绍了package.json文件在Node.js项目中的核心地位，它是项目的配置文件，包含了项目的元数据、依赖项、脚本命令等信息。通过深入剖析package.json的各个字段，如name、version、dependencies、devDependencies、scripts等，读者可以全面了解如何管理和配置前端项目的依赖关系，以及如何通过npm或yarn来安装、更新和运行项目。此外，文章还可能涉及如何优化package.json文件以提高项目的可维护性和开发效率。',
        tags: [BUILD_TOOLS, NODEJS, JAVASCRIPT, VERSION_CONTROL, CODE_QUALITY],
        content: '/shorts/package.json文件了解.md',
    },
    {
        id: '9e6bc6ee-8c0d-460a-ad26-502e6ccb72b7',
        url: '/other/shorts/promise_principles_summary.webp',
        slug: 'promise_principles_summary',
        createdAt: 1729499805787,
        title: 'Promise原理学习总结',
        description:
            'Promise是一种用于处理异步操作的对象，它代表了某个异步操作的最终完成或失败，并返回其结果。博客内容可能包括Promise的基本概念、创建和使用Promise的方法、Promise链式调用、错误处理机制以及Promise在实际开发中的应用场景。通过学习Promise的原理，开发者可以更好地理解和掌握异步编程，提高代码的可读性和可维护性。',
        tags: [JAVASCRIPT],
        content: '/shorts/Promise原理学习总结.md',
    },
    {
        id: 'd793a1af-3d13-481e-8fe0-743afa9eea36',
        url: '/other/shorts/require_loader_principles.webp',
        slug: 'require_loader_principles',
        createdAt: 1729499956343,
        title: 'require加载器的原理',
        description:
            '文章详细介绍了require加载器的工作机制，包括模块的查找、加载和缓存过程，以及如何通过模块路径解析和依赖管理来实现模块的动态加载。此外，还讨论了require加载器在不同环境下的实现差异，如Node.js和浏览器端的区别，以及如何通过配置和插件来优化模块加载性能。通过深入理解require加载器的本质，开发者可以更高效地管理和组织前端代码，提升应用的性能和可维护性。',
        tags: [JAVASCRIPT, WEBPACK, BUILD_TOOLS, NODEJS, BROWSER_APIS],
        content: '/shorts/require加载器的原理.md',
    },
    {
        id: '296edcaa-dfe3-4f8b-97d9-8672ee027567',
        url: '/other/shorts/dynamic_shell_path_config.webp',
        slug: 'dynamic_shell_path_config',
        createdAt: 1729499846517,
        title: 'shell路径动态配置',
        description:
            '文章可能涉及如何在不同的开发环境中灵活调整shell路径，以提高开发效率和代码的可移植性。此外，还可能讨论了相关的工具和技术，如环境变量管理、脚本自动化等，以帮助开发者更好地管理和优化shell路径配置。通过这些内容，读者可以学习到如何在前端项目中实现更高效和灵活的路径配置策略。',
        tags: [JAVASCRIPT, NODEJS, EXPRESS, NEXTJS, NUXTJS],
        content: '/shorts/shell路径动态配置.md',
    },
    {
        id: 'fc843a3a-5ea8-4111-83b3-cd1a70657c8e',
        url: '/other/shorts/vimium_c_plugin_shortcuts.webp',
        slug: 'vimium_c_plugin_shortcuts',
        createdAt: 1729499730292,
        title: 'Vimium-C插件快捷键',
        description:
            '介绍了如何在Chrome浏览器中通过Vimium-C插件提高浏览效率，包括页面导航、标签管理、搜索功能等常用操作的快捷键设置和使用技巧。通过掌握这些快捷键，用户可以更快速地进行网页浏览和操作，提升工作效率。',
        tags: [BROWSER_APIS, WEB_COMPONENTS, DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES],
        content: '/shorts/Vimium-C插件快捷键.md',
    },
    {
        id: '8c10bff4-3810-46ab-91e8-b4dd1b65b501',
        url: '/other/shorts/vscode_usage_tips_summary.webp',
        slug: 'vscode_usage_tips_summary',
        createdAt: 1729499272155,
        title: 'VSCode使用技巧总结',
        description:
            '在使用Visual Studio Code（VSCode）进行前端开发时，如何高效利用其各种功能和插件来提升开发效率。内容可能包括快捷键的使用、代码片段的创建与管理、插件推荐与配置、调试技巧、版本控制集成、以及如何自定义工作区设置等。通过这些技巧的总结，开发者可以更好地利用VSCode的强大功能，从而在前端开发过程中节省时间、减少错误，并提高整体开发体验。',
        tags: [BUILD_TOOLS, CODE_QUALITY, VERSION_CONTROL],
        content: '/shorts/VSCode使用技巧总结.md',
    },
    {
        id: '591e7724-2739-428d-8d59-2767c234d13e',
        url: '/other/shorts/web_frontend_unfamiliar_summary.webp',
        slug: 'web_frontend_unfamiliar_summary',
        createdAt: 1729499272177,
        title: 'Web前端陌生点总结',
        description:
            'HTML、CSS、JavaScript等前端基础技术的特定用法、浏览器兼容性问题、性能优化技巧、以及一些新兴的前端框架或库的使用方法。通过总结这些陌生点，博客旨在帮助前端开发者更好地理解和掌握这些技术细节，从而提升开发效率和代码质量。',
        tags: [JAVASCRIPT, HTML, CSS, BROWSER_APIS, STATE_MANAGEMENT],
        content: '/shorts/Web前端陌生点总结.md',
    },
    {
        id: 'e0a84d3a-87da-493f-97a5-3f549a5d5302',
        url: '/other/shorts/windows_gitea_local_git_setup.webp',
        slug: 'windows_gitea_local_git_setup',
        createdAt: 1729499861671,
        title: 'Windows使用Gitea搭建本地 Git',
        description:
            '文章详细介绍了Gitea的安装步骤、配置方法以及如何利用Gitea管理本地Git仓库，帮助开发者实现代码的版本控制和团队协作。通过搭建本地Git服务器，开发者可以在没有网络连接的情况下进行代码管理和版本控制，同时也能更好地保护代码的安全性和隐私性。',
        tags: [GIT, VERSION_CONTROL, DEVOPS],
        content: '/shorts/Windows使用Gitea搭建本地 Git.md',
    },
    {
        id: 'b454747e-213b-4be4-bad9-90b25f6e77d8',
        url: '/other/shorts/problem_solving_techniques.webp',
        slug: 'problem_solving_techniques',
        createdAt: 1729499306829,
        title: '刷题方法',
        description:
            '如何选择合适的题目、制定刷题计划、使用不同的解题技巧、以及如何通过刷题提升编程能力和解决问题的思维方式。此外，还可能讨论了如何利用在线资源、社区和工具来辅助刷题，以及如何将刷题经验应用到实际项目中。通过这些方法，前端开发者可以更高效地提升自己的技术水平和应对复杂问题的能力。',
        tags: [ALGORITHMS, DATA_STRUCTURES, JAVASCRIPT, TESTING, CODE_QUALITY],
        content: '/shorts/刷题方法.md',
    },
    {
        id: '42876b6e-4e95-43dd-8322-181016b62dcb',
        url: '/other/shorts/optimize_mini_program.webp',
        slug: 'optimize_mini_program',
        createdAt: 1729499899058,
        title: '如何优化小程序',
        description:
            '如何通过多种方法优化小程序的性能和用户体验，包括代码优化、资源管理、网络请求优化、渲染性能提升、缓存策略、懒加载技术、用户体验设计、错误监控与调试、以及持续集成与自动化测试等方面的内容。通过这些优化手段，可以有效提升小程序的加载速度、响应速度和稳定性，从而提高用户满意度和留存率。',
        tags: [PERFORMANCE, MOBILE_DEVELOPMENT, CROSS_PLATFORM],
        content: '/shorts/如何优化小程序.md',
    },
    {
        id: 'bcf88d12-d1da-44fc-9d3c-8f24a6b94a8f',
        url: '/other/shorts/crafting_quality_tech_shares.webp',
        slug: 'crafting_quality_tech_shares',
        createdAt: 1729499264618,
        title: '如何做一个有质量的技术分享',
        description:
            '技术分享的核心要素，如内容的深度与广度、表达的清晰度、互动的有效性以及如何吸引和保持听众的兴趣。此外，可能还会讨论如何准备和组织技术分享，包括选择合适的主题、准备详细的演示文稿、以及如何在分享过程中应对各种挑战。通过这些内容的探讨，旨在帮助读者提升技术分享的质量，使其更具影响力和实用性。',
        tags: [CODE_QUALITY, DESIGN_PATTERNS, STATE_MANAGEMENT, TESTING, PERFORMANCE],
        content: '/shorts/如何做一个有质量的技术分享.md',
    },
    {
        id: 'bb1d8c9b-b6cc-4070-9835-6492c6a94dab',
        url: '/other/shorts/distinguish_good_vs_bad_resources.webp',
        slug: 'distinguish_good_vs_bad_resources',
        createdAt: 1729499309198,
        title: '如何区分好资料还是坏资料',
        description:
            '判断资料质量的标准，如来源的可靠性、内容的时效性、作者的专业背景等。此外，还可能讨论如何通过阅读习惯、批判性思维和实践验证来提高辨别能力，从而避免被误导或浪费时间在不相关的信息上。通过这些方法，前端开发者可以更有效地获取和利用高质量的资料，提升学习和工作的效率。',
        tags: [CODE_QUALITY, DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES, SEO],
        content: '/shorts/如何区分好资料还是坏资料.md',
    },
    {
        id: '22dc076f-34ad-4c80-97f0-95dfa39ceadf',
        url: '/other/shorts/publish_your_own_npm_package.webp',
        slug: 'publish_your_own_npm_package',
        createdAt: 1729499812052,
        title: '如何发布自己的NPM包',
        description:
            '如何发布自己的NPM包，涵盖了从初始化项目、编写代码、配置package.json到最终发布到NPM仓库的完整流程。文章详细介绍了每个步骤的具体操作，包括如何创建和配置NPM账号、如何编写和测试代码、如何处理版本管理和依赖关系，以及如何通过命令行工具将包发布到NPM。此外，还可能涉及一些发布前的准备工作，如代码优化、文档编写和测试覆盖率检查，以确保发布的包质量高且易于使用。通过这篇博客，读者可以系统地学习如何将自己的前端代码打包并分享给全球开发者社区。',
        tags: [NODEJS, JAVASCRIPT, TYPESCRIPT, BUILD_TOOLS, VERSION_CONTROL],
        content: '/shorts/如何发布自己的NPM包.md',
    },
    {
        id: '393b5949-bc63-4afc-848a-b9ded2a7448c',
        url: '/other/shorts/how_to_ask_questions.webp',
        slug: 'how_to_ask_questions',
        createdAt: 1729499272112,
        title: '如何提问问题',
        description:
            '在前端开发过程中如何有效地提问问题。博客内容可能包括提问前的准备工作，如明确问题的背景、复现步骤和预期结果；提问时的技巧，如使用简洁明了的语言、提供必要的代码片段和错误信息；以及提问后的跟进，如如何处理回复和进一步澄清问题。通过这些内容，博客旨在帮助前端开发者提高问题解决的效率，促进技术社区的交流与合作。',
        tags: [CODE_QUALITY, DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES, GIT],
        content: '/shorts/如何提问问题.md',
    },
    {
        id: '99edeabf-26ee-4898-b3d7-0f3a3fdc373e',
        url: '/other/shorts/computer_usage_tips_summary.webp',
        slug: 'computer_usage_tips_summary',
        createdAt: 1729499272041,
        title: '电脑使用技巧总结',
        description:
            '各种提高电脑使用效率和便捷性的技巧，包括但不限于操作系统优化、常用软件快捷键、文件管理技巧、网络安全防护、以及硬件维护和故障排除等方面的内容。这篇博客旨在帮助用户更好地理解和掌握电脑的各项功能，提升日常工作和学习的效率，同时增强对电脑系统的维护和管理能力。通过总结这些实用技巧，读者可以更有效地解决电脑使用过程中遇到的各种问题，从而获得更加流畅和安全的电脑使用体验。',
        tags: [BROWSER_APIS, HTTP, PERFORMANCE, SEO, WEB_COMPONENTS],
        content: '/shorts/电脑使用技巧总结.md',
    },
    {
        id: 'b67db19d-ae73-4c44-ab28-8424d4dbd4d9',
        url: '/other/shorts/programmers_career_control.webp',
        slug: 'programmers_career_control',
        createdAt: 1729499268280,
        title: '程序员如何把控自己的职业',
        description:
            '程序员在职业生涯中如何有效地管理和提升自己的职业发展。文章可能涵盖了职业规划的重要性，如何设定短期和长期目标，以及如何在技术快速变化的领域中保持竞争力。此外，还可能讨论了如何通过持续学习和技能提升来应对职业挑战，以及如何在团队中建立良好的职业关系和领导力。通过这些内容的探讨，程序员可以更好地把控自己的职业方向，实现个人和职业的双重成长。',
        tags: [DESIGN_PATTERNS, ALGORITHMS, DATA_STRUCTURES, CODE_QUALITY, VERSION_CONTROL],
        content: '/shorts/程序员如何把控自己的职业.md',
    },
    {
        id: '1e23ee53-6b59-4925-9f9d-662a8464daa3',
        url: '/other/shorts/random_avatar_api.webp',
        slug: 'random_avatar_api',
        createdAt: 1729499823313,
        title: '随机头像API',
        description:
            '随机头像API的使用方法和应用场景。博客内容涵盖了如何通过API获取随机头像，API的基本参数和调用方式，以及在前端开发中如何集成和使用这些随机头像。此外，还可能讨论了随机头像API的优势，如提升用户体验、增加个性化元素等，并举例说明了在不同前端项目中如何实现动态头像的显示。通过这些内容，读者可以了解到随机头像API的实际应用价值和开发技巧。',
        tags: [JAVASCRIPT, HTML, CSS, REST_API, BROWSER_APIS],
        content: '/shorts/随机头像API.md',
    },
];
